<!--
 * @author hugh
 * @time  2021-01-10 11:40
 * @title  grid icon选择
 * @desc
 -->
<template>
  <div class="grid-content heigth-fill">
    <div v-if="!data.isPhone">
      <div class="padding-sm text-center" @click="toRouter('/statistics')">
        <h4 style="color: #ffffff">{{ $t('app.title') }}</h4>
      </div>
      <el-menu
        :uniqueOpened="true"
        :default-active="props.active"
        class="bg-theme-dark"
        @select="handleSelectItem"
        @open="handleOpen"
        @close="handleClose"
        text-color="#fff"
        active-text-color="#ffd04b"
        background-color="#001529"
      >
        <template v-for="(item, index) in props.datas" :key="index">
          <el-submenu v-if="item.childs.length > 0" :index="item.id">
            <template #title>
              <i :class="'el-icon-' + item.css" class="size-24 text-white"></i>
              <span>{{ item.name }}</span>
            </template>
            <template v-for="(citem, cindex) in item.childs" :key="cindex">
              <el-submenu v-if="citem.childs && citem.childs.length > 0" :index="citem.id">
                <template #title>
                  <i :class="'el-icon-' + citem.css" class="size-24 text-white"></i>
                  <span>{{ citem.name }}</span>
                </template>
                <el-menu-item v-for="(ccitem, ccindex) in citem.childs" :key="ccindex" :index="ccitem.id">
                  <template #title>
                    <i :class="'el-icon-' + ccitem.css" class="size-24 text-white"></i>
                    <span>{{ ccitem.name }}</span>
                  </template>
                </el-menu-item>
              </el-submenu>
              <el-menu-item v-else class="bg-theme-dark width-fill" :index="citem.id">
                <i :class="'el-icon-' + citem.css" class="size-24 text-white"></i>
                <span>{{ citem.name }}</span>
              </el-menu-item>
            </template>
          </el-submenu>
          <el-menu-item v-else :index="item.id">
            <i :class="'el-icon-' + item.css" class="size-24 text-white"></i>
            <template #title>
              {{ item.name }}
            </template>
          </el-menu-item>
        </template>
      </el-menu>
    </div>
    <div v-else class="text-center">
      <i class="text-white el-icon-s-unfold size-24 margin-top-sm" @click="data.drawer = true"></i>
      <el-drawer title="菜单" v-model="data.drawer" :with-header="false" direction="ltr" size="50%" custom-class="bg-theme-dark">
        <el-menu
          :uniqueOpened="true"
          :default-active="props.active"
          class="bg-theme-dark"
          @select="handleSelectItem"
          @open="handleOpen"
          @close="handleClose"
          text-color="#fff"
          active-text-color="#ffd04b"
          background-color="#001529"
        >
          <template v-for="(item, index) in props.datas" :key="index">
            <el-submenu v-if="item.childs.length > 0" :index="item.id">
              <template #title>
                <i :class="'el-icon-' + item.css" class="size-24 text-white"></i>
                <span>{{ item.name }}</span>
              </template>
              <template v-for="(citem, cindex) in item.childs" :key="cindex">
                <el-submenu v-if="citem.childs && citem.childs.length > 0" :index="citem.id">
                  <template #title>
                    <i :class="'el-icon-' + citem.css" class="size-24 text-white"></i>
                    <span>{{ citem.name }}</span>
                  </template>
                  <el-menu-item v-for="(ccitem, ccindex) in citem.childs" :key="ccindex" :index="ccitem.id">
                    <template #title>
                      <i :class="'el-icon-' + ccitem.css" class="size-24 text-white"></i>
                      <span>{{ ccitem.name }}</span>
                    </template>
                  </el-menu-item>
                </el-submenu>
                <el-menu-item v-else class="bg-theme-dark width-fill" :index="citem.id">
                  <i :class="'el-icon-' + citem.css" class="size-24 text-white"></i>
                  <span>{{ citem.name }}</span>
                </el-menu-item>
              </template>
            </el-submenu>
            <el-menu-item v-else :index="item.id">
              <i :class="'el-icon-' + item.css" class="size-24 text-white"></i>
              <template #title>
                {{ item.name }}
              </template>
            </el-menu-item>
          </template>
        </el-menu>
        <div class="foot width-df flex justify-center"><el-button @click="data.drawer = false" size="small" round>收起</el-button></div>
      </el-drawer>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent, toRefs, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
const emit = defineEmits(['select', 'open', 'close', 'header']);
const props = defineProps({
  datas: Array,
  active: {
    type: [Number, String],
    default: 0
  }
});
//路由
const router = useRouter();

//vuex
const store = useStore();
const data = reactive({
  isPhone: store.state.isPhone,
  drawer: false
});

onMounted(() => {
  window.onresize = function() {
    data.isPhone = document.documentElement.clientWidth < document.documentElement.clientHeight;
  };
});
const toRouter = (path: string) => {
  router.push(path);
  emit('header', path);
};
const handleSelectItem = (key: any, keyPath: any) => {
  emit('select', key);
};
const handleOpen = (key: any, keyPath: any) => {
  emit('open', key);
};
const handleClose = (key: any, keyPath: any) => {
  emit('close', key);
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.el-menu {
  border-right: none;
}

.el-submenu .el-menu-item {
  min-width: 100px;
}
.el-drawer__body {
  background-color: #001529;
}
</style>
